<template>
    <div class="recommend_detail">
        <div class="headerWrapper">
            <img src="../assets/castle.svg" alt="" class="logo">
            <h2>{{heading}}</h2>
        </div>
        <div class="detailAvatar" v-loading.fullscreen.lock="$store.state.fullscreenLoading">
            <div class="detailAvatarImg">
                <div class="imgWrapper">
                    <img :src="detailAvatar" alt="" v-show="detailAvatar !== ''">
                    <img src="../assets/castle.svg" alt="" v-show="detailAvatar === ''">
                </div>
                <p>{{detailName}}</p>
            </div>
            <songs-list :datailTracks="detailTracks"></songs-list>
        </div>
    </div>
</template>

<script>
  import "../assets/castle.svg"
  import { getHighQualitySongsMenuDetail,singerDetail,singerAllSongs } from "../api/http"
  import SongsList from "../components/songs-list"
  import { mapMutations } from "vuex"
  export default {
    name: "recommend-detail",
    components:{
      SongsList
    },
    data(){
      return {
        heading:"",
        detailId:'',
        detailAvatar:'',
        detailTracks:[],
        detailName:'',
      }
    },
    created(){
      switch (Object.keys(this.$route.params)[0]) {
        case "playlist_id":
          this.heading = "歌单详情"
          this.detailId = this.$route.params.playlist_id
          this._getHighQualitySongsMenuDetail(this.detailId)
          break
        case "singer_id":
          this.heading = "歌手详情"
          this.detailId = this.$route.params.singer_id
          this._singerDetail(this.detailId)
          this._singerAllSongs(this.detailId)
          break
      }
    },
    activated(){
      switch (Object.keys(this.$route.params)[0]) {
        case "playlist_id":
          if(this.detailId !== this.$route.params.playlist_id){
            this.detailId = this.$route.params.playlist_id
            this._getHighQualitySongsMenuDetail(this.detailId)
          }
          break
        case "singer_id":
          if(this.detailId !== this.$route.params.singer_id){
            this.detailId = this.$route.params.singer_id
            this._singerDetail(this.detailId)
            this._singerAllSongs(this.detailId)
          }
          break
      }
    },
    methods:{
      ...mapMutations(["setLoading"]),
      async _getHighQualitySongsMenuDetail(id) {
        this.setLoading(true)
        const res = await getHighQualitySongsMenuDetail(id);
        this.detailTracks = res.data.playlist.tracks;
        this.detailAvatar = res.data.playlist.coverImgUrl;
        this.detailName = res.data.playlist.name;
        this.setLoading(false)
      },
      async _singerDetail(id){
        const res = await singerDetail(id)
        this.detailAvatar = res.data.data.artist.cover
        this.detailName = res.data.data.identify.imageDesc
      },
      async _singerAllSongs(id){
        this.setLoading(true)
        const res = await singerAllSongs(id)
        console.log(res)
        this.detailTracks = res.data.songs
        this.setLoading(false)
      },
    }
  };
</script>

<style scoped lang="scss">
    @import "../common/variable";
    .recommend_detail{
        width: 100%;
        position: fixed;
        z-index: 2;
        top:0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100vh;
        overflow: auto;
        background-color: #fff;
        .detailAvatar{
            width: 100%;
            height: 150rem;
            padding:8rem;
            box-sizing: border-box;
            background-image: linear-gradient(to right,	#D8D8D8, #300000);
            .detailAvatarImg{
                width: 100%;
                height: 100%;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                .imgWrapper{
                    width: 140rem;
                    height: 140rem;
                    img{
                        width: 140rem;
                        height: 140rem;
                        border-radius: 5rem;
                        object-fit: cover;
                    }
                }
                p{
                    flex-grow: 1;
                    font-size: $header-fontsize-M;
                    color: #FFF;
                }

            }
        }
        .headerWrapper{
            display: flex;
            align-items: center;
            font-size: $header-fontsize-S;
            height: 70rem;
            padding: 5rem;
            box-sizing: border-box;
            border-bottom: 1rem silver solid;
            .logo{
                width: 38rem;
                height: 38rem;
            }
            h2{
                line-height: $header-fontsize-S;
                flex-grow: 1;
            }
        }
    }
</style>